<template>
  <layout-slot :reArticle="reArticle" className="common-page main-content" class="bg-white">
    <source-slot/>
    <div class="common-item" v-for="item of categories">
      <div class="common-title">
        分类 : {{ item.name }}
      </div>
      <div class="post-lists">
        <div class="post-lists-body">
          <div class="post-list-item" v-for="(tmp,index) of item.articles">
            <div class="post-list-item-container  bg-green">
              <a :href="tmp.url">
                <div class="item-label " :class="bgColor[index % bgColor.length]">
                  <div class="item-title">{{ tmp.name }}</div>
                  <div class="item-meta clearfix">
                    <div class="item-meta-ico bg-ico-book"
                         :style="{
                      background: `url(https://rawchen.com/usr/themes/rawchen/images/bg-ico.png) no-repeat`,
                      backgroundSize: `40px auto`,
                      backgroundPosition:`0 -${(index % 10) * 40}px !important`,}">
                    </div>
                    <div class="item-meta-date">{{tmp.date | dateFormat('{y}-{m}-{d}') }}</div>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </layout-slot>
</template>

<script>
  import { getReArticle } from '~/api'

  export default {
    name: 'categoryPage',
    data() {
      return {

        bgColor: ['bg-green', 'bg-red', 'bg-blue', 'bg-purple', 'bg-orange', 'bg-yellow'],
        categories: [],
        reArticle:[]
      }
    },
    props: {
      url: String,
    },
    async asyncData ({ params, app,route }){
      let categories = []
      await app.$axios({
        url:"/category/get",
        params:{type: route.params.url}
      }).then(({data})=>{
        categories = data.data.map((item) => {
          let obj = {}
          obj.name = item.categoryTitle
          obj.url = item.categoryURI
          obj.articles = item.articles.map((tmp) => {
            if (tmp) {
              return {
                name: tmp.articleTitle,
                url: `/article-detail/${tmp.oId}`,
                date: tmp.articleCreated
              }
            }
          }).filter((m) => m)
          return obj
        })
      })
      // 使用路由中间件
      let reArticle = await getReArticle(app)
      return {
        categories,
        reArticle
      }
    }
  }
</script>

<style scoped>

</style>
